<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/layui/css/layui.css">
<style>
 body{
    margin: 0px;
    padding: 0px;
    background-color: #036AD1;
  }
  form {
    width:350px;
    margin: 200px auto;
    background-color : #FFF;
    padding: 30px;
    border: 1px solid #CDCDCD;
    border-radius: 10px;
  }
  h1{
    text-align: center;
    margin-bottom: 25px;
  
  }
</style>
</head>
<body>
	<form class="layui-form">
	    <h1>管理员登录</h1>
		<div class="layui-form-item">
		    <label class="layui-form-label">用户名</label>
			<div class="layui-input-inline">
				<input type="text" name="username" placeholder="请输入用户名"
					class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
		    <label class="layui-form-label">密码</label>
			<div class="layui-input-inline">
				<input type="password" name="password" placeholder="请输入密码"
					class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-inline">
				<button class="layui-btn" lay-submit lay-filter="login">立即登录</button>
			</div>
		</div>
	</form>
	<script type="text/javascript" src="/layui/layui.js">
	</script>
	<script type="text/javascript">
		layui.use(['form','layer'],function(){
			
			var form = layui.form;
			
			var layer = layui.layer,
			$ = layui.$;
			
			form.on('submit(login)',function(data){
				$.ajax({
					url: '/api/admin/login',
					data: data.field,
					type : 'post',
					dataType: 'json',
					success: function(result){
						if(result.code>0){
							window.location.href = "/";
						}else{
							layer.msg(result.msg);
						}
					},
					error: function(){
						layer.msg("请求失败");
					}
				});
				return false;
			});
		});
	</script>

</body>
</html>